<template>
    <view class="page">
        <view class="main-page">
            <view class="list-items">
                <view class="out-box">
                    <view class="class-box">
                        <view class="image">
                            <image class="img" src='./img/icon-class.png'></image>
                        </view>
                        <view class="text-wrapper">
                            <view class="name">{{ itemData.name }}</view>
                            <view class="teacher-name">创建时间：{{ itemData.created }}</view>
                            <view class="join-time">班级人数：{{ itemData.student_count }}</view>
                        </view>
                        <view class="btn" @click="handleCode(itemData)">
                            生成邀请码
                        </view>
                    </view>
                    <view class="class-intro">
                        <view class="text_5">{{ itemData.description }}</view>
                    </view>
                </view>
            </view>
            <view>
                <uni-table class="table" emptyText="暂无更多数据">
                    <!-- 表头行 -->
                    <uni-tr>
                        <uni-th align="center" width="100rpx">序号</uni-th>
                        <uni-th align="center" width="112rpx">姓名</uni-th>
                        <uni-th align="left" width="156rpx">账号</uni-th>
                        <uni-th align="left" width="300rpx">加入时间</uni-th>
                        <uni-th style="position: sticky; top: 0; background-color: #fff;" align="left"
                            width="200rpx">操作</uni-th>
                    </uni-tr>
                    <!-- 表格数据行 -->
                    <uni-tr v-for="(value, index) in tableData" :key="index">
                        <uni-td>{{ index + 1 }}</uni-td>
                        <uni-td>{{ value.real_name }}</uni-td>
                        <uni-td>{{ value.login_name }}</uni-td>
                        <uni-td>{{ value.created }}</uni-td>
                        <uni-td>
                            <view class="operation-box">
                                <view class="operation-btn" @click="handleReset(value)">
                                    重置
                                </view>
                                <view class="operation-btn" @click="handleRemove(value)">
                                    移出
                                </view>

                            </view>
                        </uni-td>
                    </uni-tr>
                </uni-table>
            </view>

        </view>
        <!-- 弹窗 -->
        <uni-popup ref="popup" background-color="#fff" borderRadius="12px 12px 0px 0px" :mask-click="false">
            <view class="popup-content">
                <view class="popup-header">
                    {{ tip }}
                    <view class="close-icon" @click="closeAffirmPopup">
                        <image class="close-icon-image" referrerpolicy="no-referrer" src="./img/close.png" />
                    </view>
                </view>
                <view class="popup-body">
                    <view class="btn" @click="handleAffirm">确认</view>
                </view>
            </view>
        </uni-popup>
        <bottomBackBtn v-if="showButtom"></bottomBackBtn>
    </view>
</template>
<script>
import API from '@/api/teacherapi'
export default {
    data() {
        return {
            loopData: [],
            showButtom: true,
            itemData: {},
            tableData: [],
            tip: '',
            type: '', //1重置2移除
            selectData: {}
        };
    },
    async onLoad(options) {
        this.class_id = options.class_id
        await this.getTeacherData()
        await this.loadData()
        await this.getClassStudentPagedList()
    },
    methods: {
        closeAffirmPopup() {
            this.$refs.popup.close()
            this.showButtom = true
        },
        async handleReset(row) {
            this.selectData = row
            this.showButtom = false
            this.type = '1'
            this.tip = '确认重置密码吗？'
            this.$refs.popup.open('bottom')
        },
        async handleRemove(row) {
            this.selectData = row
            this.showButtom = false
            this.type = '2'
            this.tip = '确认移除该学生吗？'
            this.$refs.popup.open('bottom')
        },
        async handleAffirm() {
            if (this.type == '1') {
                let params = {
                    user_id: this.selectData?.student?.user?.user_id,
                    password: "123456",
                };
                const res = await API.UserResetUserPassword(params);
                console.log(res);
                uni.showToast({
                    title: '重置成功,密码重置为123456',
                    icon: 'success',
                    duration: 1500
                })
                this.closeAffirmPopup()
                this.loadData()
                this.getClassStudentPagedList()
            }
            if (this.type == '2') {
                let params = {
                    class_student_id: this.selectData.class_student_id,
                };
                const res = await API.ClassStudentDelete(params);
                uni.showToast({
                    title: '移除成功',
                    icon: 'success',
                    duration: 1500
                })
                this.closeAffirmPopup()
                this.loadData()
                this.getClassStudentPagedList()
            }
        },
        async getTeacherData() {
            const res = await API.UserMyTeacherIds({});
            console.log(res);
            this.teacherData = res;
            this.teacher_id = res[0].teacher_id;
        },
        async getClassStudentPagedList() {
            let param = {
                class_idArray: [this.class_id],
                current: 1,
                pageSize: 999
            }
            let res = await API.ClassStudentPagedList({ args: param })
            console.log(res)
            if (res) {
                this.tableData = res.data.map((item) => {
                    return {
                        ...item,
                        ...item.student,
                        ...item.student.user,
                    };
                });
            }
        },
        async handleCode(item) {
            //随机四位数
            const invide_code = Math.floor(Math.random() * 9000) + 1000;
            await API.ClazzUpdate({ ...item, invide_code: String(invide_code) });
            uni.showToast({
                title: '邀请码已创建',
                icon: 'success',
                duration: 1500
            })
        },
        async loadData() {
            let param = {
                class_id: this.class_id
            }
            let res = await API.ClazzFetchModel(param)
            console.log(res)
            if (res) {
                this.itemData = res
            }
            console.log(this.itemData)
        },
    },
};
</script>
<style lang="less" scoped>
.operation-box {
    display: flex;
    justify-content: space-between;
    width: 100%;

    .operation-btn {
        height: 40rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #2776FF;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
        margin-right: 20rpx;
    }
}

.popup-content {
    padding-top: 48rpx;

    .popup-header {
        padding: 0 48rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 34rpx;
        color: #262626;
        height: 50rpx;
        line-height: 50rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .close-icon {
            width: 40rpx;
            height: 40rpx;

            .close-icon-image {
                width: 100%;
                height: 100%;
            }
        }
    }

    .popup-body {
        padding: 158rpx 56rpx 0 56rpx;
        height: calc(280rpx + env(safe-area-inset-bottom));
        display: flex;
        align-items: flex-end;
        .btn {
            width: 100%;
            height: 92rpx;
            background: #2776FF;
            color: #fff;
            border-radius: 12rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 34rpx;
            text-align: center;
            line-height: 92rpx;
        }
    }
}

.popup-content {
    padding-top: 48rpx;

    .popup-header {
        padding: 0 48rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 34rpx;
        color: #262626;
        height: 50rpx;
        line-height: 50rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .close-icon {
            width: 40rpx;
            height: 40rpx;

            .close-icon-image {
                width: 100%;
                height: 100%;
            }
        }
    }

    .popup-body {
        padding: 32rpx 56rpx calc(32rpx + env(safe-area-inset-bottom)) 56rpx;

        .join-btn {
            width: 100%;
            height: 92rpx;
            background: #2776FF;
            color: #fff;
            border-radius: 12rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 34rpx;
            text-align: center;
            line-height: 92rpx;
        }

        .popup-input {
            height: 128rpx;
            line-height: 128rpx;
            background: #FFFFFF;
            box-shadow: inset 0px -1px 0px 0px #E6EBF1;
            font-size: 32rpx;
            color: #262626;

            &::placeholder {
                color: #BFBFBF;
                font-weight: 400;
                font-size: 32rpx;
            }
        }

        .tip {
            height: 48rpx;
            line-height: 48rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #FF4D4F;
        }

        .teacher-input-box {
            height: 176rpx;

        }

        .code-input-box {
            height: 230rpx;
        }

        .done-img {
            height: 266rpx + 60rpx;
            padding-top: 60rpx;
            display: flex;
            justify-content: center;

            .img {
                width: 322rpx;
                height: 266rpx;
            }
        }

        .title-a {
            margin-top: 56rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #111A34;
            height: 40rpx;
            line-height: 40rpx;
            text-align: center;
        }

        .content-text {
            margin-top: 24rpx;
            height: 218rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #595959;
            line-height: 32rpx;
            text-align: right;
            padding: 0 130rpx;
        }

        .box_6 {
            background-color: rgba(255, 255, 255, 1);
            padding: 38rpx 0 38rpx 0;

            .text-wrapper_14 {
                width: 100%;

                .text_31 {
                    overflow-wrap: break-word;
                    color: rgba(0, 0, 0, 1);
                    font-size: 32rpx;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 52rpx;
                }

                .text_32 {
                    overflow-wrap: break-word;
                    color: rgba(140, 140, 140, 1);
                    font-size: 28rpx;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 40rpx;
                    margin-top: 12rpx;
                }
            }

            .text-wrapper_15 {
                background-color: rgba(248, 249, 251, 1);
                border-radius: 8px;
                margin-top: 24rpx;
                padding: 24rpx;

                .text_33 {
                    overflow-wrap: break-word;
                    font-size: 32rpx;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 44rpx;
                }
            }
        }
    }
}

.page {
    background-color: rgba(248, 248, 248, 1);
    position: relative;
    width: 750rpx;
    height: 100%;

    .main-page {
        height: calc(100% - 144rpx - env(safe-area-inset-bottom));
        padding: 24rpx 0 24rpx 0;

        .list-items {
            margin-bottom: 24rpx;
            width: 100%;
            padding: 32rpx;
            background-color: #fff;

            .out-box {
                width: 100%;
                height: 100%;
                border-radius: 16rpx;
                border: 2rpx solid #E6EBF1;

                padding: 24rpx;

                .class-box {
                    display: flex;
                    width: 100%;
                    height: 100%;

                    .image {
                        width: 92rpx;
                        height: 92rpx;
                        // background-color: #d1d1d1;

                        .img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .text-wrapper {
                        margin-left: 24rpx;
                        flex: 1;

                        .name {
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 600;
                            font-size: 32rpx;
                            color: #333333;
                            line-height: 36rpx;
                            height: 36rpx;
                        }

                        .teacher-name {
                            margin-top: 18rpx;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 28rpx;
                            color: #666666;
                            line-height: 40rpx;
                        }

                        .join-time {
                            margin-top: 4rpx;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 28rpx;
                            color: #666666;
                            line-height: 40rpx;
                        }

                    }

                    .btn {
                        width: 152rpx;
                        height: 56rpx;
                        background: #2776FF;
                        border-radius: 8rpx;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #FFFFFF;
                        line-height: 56rpx;
                        text-align: center;
                        font-style: normal;
                    }
                }


                .class-intro {
                    width: 100%;
                    min-height: 128rpx;
                    background: #F8F9FB;
                    border-radius: 16rpx;
                    padding: 24rpx;
                    margin-top: 16rpx;

                    .text {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #595959;
                        line-height: 40rpx;
                        text-align: left;
                        font-style: normal;
                    }
                }

                .class-btn {
                    width: 100%;
                    min-height: 96rpx;
                    background: #FFFFFF;
                    box-shadow: inset 0rpx 1rpx 0rpx 0rpx #E6EBF1;
                    margin-top: 24rpx;
                    display: flex;

                    .btn {
                        display: flex;
                        flex: 1;
                        align-items: center;
                        justify-content: center;
                        padding: 0 auto;

                        .img {
                            width: 32rpx;
                            height: 32rpx;
                            margin-right: 16rpx;
                        }
                    }
                }
            }
        }

        .join-box {
            padding: 24rpx;
        }

        .join-new {
            width: 100%;
            height: 92rpx;
            background-color: #fff;
            border-radius: 12rpx;
            border: 2rpx solid #BEC4CA;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 88rpx;

            .icon {
                width: 40rpx;
                height: 40rpx;
                margin-right: 16rpx;
            }
        }
    }
}
</style>
